<template>
  <div id="test_my_table">
    <MyTable :data="list">
      <template #thead>
        <td>序号</td>
        <td>名称</td>
        <td>图片</td>
        <td>描述</td>
        <td>标签</td>
      </template>
      <template #tag="{ item }">
        <MyTag v-model="item.tag"></MyTag>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from "../components/MyTable.vue";
import MyTag from "../components/MyTag.vue";
export default {
  components: {
    MyTable,
    MyTag,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: "Apple",
          picUrl: "../pics/坤哥.jpg",
          desc: "红色苹果",
          tag: "水果",
        },
        {
          id: 2,
          name: "Orange",
          picUrl: "../pics/坤哥.jpg",
          desc: "新鲜橘子",
          tag: "水果",
        },
        {
          id: 3,
          name: "小米手机",
          picUrl: "../pics/坤哥.jpg",
          desc: "质量很好",
          tag: "电子产品",
        },
        {
          id: 4,
          name: "红米手机",
          picUrl: "../pics/坤哥.jpg",
          desc: "拍照一流",
          tag: "电子产品",
        },
        {
          id: 5,
          name: "荣耀",
          picUrl: "../pics/坤哥.jpg",
          desc: "千元机",
          tag: "电子产品",
        },
      ],
    };
  },
};
</script>

<style></style>
